<template>
  <div>
    <Qianzhikong style="padding: 24px;background-color: #F5F8FE;overflow-y: auto"/>

    <ArkForm ref="form" v-model:options="options"/>

    <div @click="handleClick">重置</div>
  </div>
</template>

<script lang="ts">

import {defineComponent} from 'vue';
import Qianzhikong from "@/components/rjhz/list-refresh-load/use/Qianzhikong.vue";
import ArkForm from "@/components/ark-component-v2/basic/ark-form/ArkForm.vue";
import {FormItem, LayoutMode} from "@/components/ark-component-v2/basic/ark-form/ArkFormOptions.js";
import ArkTipType from "@/components/ark-component-v2/common-type/ark-tip-type.js";
import ArkInteractionType from "@/components/ark-component-v2/common-type/ark-interaction-type.js";
import dayjs from "dayjs";
import {ElMessage} from "element-plus";

export default defineComponent({
  components: {ArkForm, Qianzhikong},
  data() {
    return {
      options: {
        layout: {
          mode: LayoutMode.GRID,
          column: 2
        },
        delimiter: '：',
        formItems: [
          {
            label: (model) => {
              console.log('label', model)
              return '姓名'
            },
            prop: 'name',
            value: '张三',
            tip: {
              title: '提示标题',
              content: '提示内容',
              type: ArkTipType.WARNING,
            },
            show: true,
            disabled: true,
            span: 2,
            rule: (params) => {
              console.log('rule', params)
              return {required: true, message: '姓名不能为空'}
            },
            interaction: {
              width: '100%'
            }
          },
          {
            label: '性别',
            prop: 'sex',
            value: 'nan',
            interaction: {
              type: ArkInteractionType.RADIO,
              options: [
                {text: '男', value: 'nan'},
                {text: '女', value: 'nv'},
              ],
            }
          },
          {
            label: '角色',
            prop: 'role',
            value: '',
            interaction: {
              type: ArkInteractionType.SELECT,
              options: () => {
                return Promise.resolve([
                  {text: '管理员', value: 'admin'},
                  {text: '医生', value: 'docter'},
                  {text: '老师', value: 'teacher'},
                  {text: '学生', value: 'student'},
                ])
              },
              extraAllOptionForAsync: true
            }
          },
          {
            label: '备注',
            prop: 'remark',
            span: 2,
            interaction: {
              type: ArkInteractionType.TEXT_AREA,
              rows: 10,
              width: '100%'
            }, rule: {required: true, message: '姓名不能为空'}
          },
          {
            label: '年龄',
            prop: 'age',
            value: 10,
            interaction: {
              type: ArkInteractionType.NUMBER,
              min: 0,
              max: 100,
              step: 10
            }
          },
          {
            label: '系统',
            prop: 'system',
            value: 'STORYBOOK',
            interaction: {
              type: ArkInteractionType.READONLY_TEXT,
              transform: (val) => {
                console.log('transform', val)
                return `${val}系统`
              }
            }
          },
          {
            label: '日期',
            prop: 'date',
            value: dayjs().format('YYYY-MM-DD'),
            interaction: {
              type: ArkInteractionType.DATE,
              valueFormat: 'YYYY-MM-DD',
              showFormat: 'YYYY~MM~DD',
            }
          },
        ],
        onFormItemEnter: (formItem: FormItem) => {
          ElMessage({
            message: '表单项回车操作，参数请看控制台打印',
            type: 'success',
          });
          console.log(formItem)
        },
      }
    };
  },
  methods: {
    handleClick() {
      this.$refs.form.fetchOptions(
        this.options.formItems[2],
        this.options.formItems,
      );
      /*this.$refs.form.reset();
      this.$refs.form.fetchOptions();*/
    }
  }
});
</script>

<style scoped>

</style>
